/*
 * 楼盘基本信息
 * @author 狮子
 * @time 2018/9/19
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Modal,Input, Row, Col, Spin, Select, Tabs, Radio, Button } from 'antd'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'

import Uploader from 'widget/Upload'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import FlagBtn from 'widget/FlagBtn/FlagView'
import { download } from "utils/util"

const confirm = Modal.confirm;
const Option = Select.Option;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const RadioGroup = Radio.Group;
const { zysqAppKey,zysqAppsecret} = config
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { biz, loading, detail, actionType, title, images, typeList} = modelObj
  function detailSkip(type, id) {
    let actionType = type
    hashHistory.push({
      pathname: '/home/buildingAdmin/forBuildEdit',
      query: { id, actionType }
    });

  }

  const formItemLayout = {
    labelCol: {
        span: 1,

    },
    wrapperCol: {
        span: 16
    },
}
const imageLayout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
}
function removeImgUrl(inx, origin){
    if(origin == 'images'){
        images.splice(inx ,1)
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { images }
        })
    }else if(origin == 'houseTypeImage'){
        houseTypeImage.splice(inx ,1)
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { houseTypeImage }
        })
    }else if(origin == 'outerImage'){
        outerImage.splice(inx ,1)
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { outerImage }
        })
    }
}
function updateImageModel(url, origin){
    if(origin == 'images'){
        images.push(url)
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { images }
        })
    }else if(origin == 'houseTypeImage'){
        houseTypeImage.push(url)
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { houseTypeImage }
        })
    }else if(origin == 'outerImage'){
        outerImage.push(url)
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { outerImage }
        })
    }
}
  
  function getBuildTypeOption(){
    return typeList.map((item, idx) =>
        <Select.Option key={idx} value={item.type}>{item.title}</Select.Option>
      )
  }

  function getBuildType(val){
    let value = ""
    typeList.forEach(type => {
      if(type.type == val){
        value = type.title
      }
    });
    return value
  }
  function updateModel(value, key, obj){
    detail[key] = value
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { detail }
    })
  }
  return (
    <div className={cx('public_listMain')}>
        <div className="functionButton">
            {actionType == 'check' ? (<Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                hashHistory.push({
                  pathname: '/home/applyAdmin/buildList',
                  query: { }
                });
            }} >返回</Button>): <Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                form.validateFields((err) => {
                    if(!err){
                        detail.type = type
                        dispatch({
                            type: `${namespace}/update`,
                            payload: {detail}
                        })
                    }
                });

            }} >保存</Button> }
        </div>
        <CollapsiblePanels title={title} hideUpDownBtn={true}  >
            <Form autoComplete="off" className="auto-wrap" >

                <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label="改建类型" labelCol={{ span: 5 }}>
                            <div>
                                {getFieldDecorator('buildType', {
                                    initialValue: detail.buildType,
                                    rules: [
                                        { required: true, whitespace: true, message: '改建类型' },
                                    ],
                                    })(<Select
                                      placeholder={"请选择改建类型"}
                                      disabled={actionType == 'check'}
                                      onChange={(e) => inputChange(e, 'businessId')}>
                                      {getBuildTypeOption()}
                                    </Select>)}
                            </div>
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label="改建地址" labelCol={{ span: 5 }}>
                            <div>
                                {getFieldDecorator('buildLocation', {
                                    initialValue: detail.buildLocation,
                                    rules: [
                                        { required: true, whitespace: true, message: '请输入改建地址' },
                                    ],
                                    })(<Input
                                    placeholder={'请输入改建地址'}
                                    autoComplete={'off'}
                                    disabled={actionType == 'check'}
                                    maxLength={100}
                                    onChange={(e) => { updateModel(e.target.value, 'buildLocation', 'detail') }}
                                />)}
                            </div>
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label="建筑面积" labelCol={{ span: 5 }}>
                            <div className={cx('select-item-contain')}>
                                {getFieldDecorator('area', {
                                    initialValue: detail.area  + '',
                                    rules: [
                                        { required: true, whitespace: true, message: '请输入建筑面积' },
                                    ],
                                    })(<Input
                                    placeholder={'请输入建筑面积'}
                                    disabled={actionType == 'check'}
                                    autoComplete={'off'}
                                    type="number"
                                    onChange={(e) => { updateModel(e.target.value, 'area', 'detail') }}
                                />)}
                            </div>
                        </FormItem>
                    </Col>
                    
                </Row>
                <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label="申请人" labelCol={{ span: 5 }} >
                            <div className={cx('select-item-contain')}>
                                {getFieldDecorator('username', {
                                    initialValue: detail.username,
                                    rules: [
                                        { required: true, whitespace: true, message: '请输入申请人' },
                                    ],
                                    })(<Input
                                    placeholder={'请输入申请人'}
                                    disabled={actionType == 'check'}
                                    autoComplete={'off'}
                                    onChange={(e) => { updateModel(e.target.value, 'username', 'detail') }}
                                />)}
                            </div>
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label="联系方式" labelCol={{ span: 5 }}>
                            <div className={cx('select-item-contain')}>
                                {getFieldDecorator('mobile', {
                                    initialValue: detail.mobile,
                                    rules: [
                                        { required: true, whitespace: true, message: '请输入联系方式' },
                                    ],
                                    })(<Input
                                    placeholder={'请输入联系方式'}
                                    disabled={actionType == 'check'}
                                    autoComplete={'off'}
                                    type="number"
                                    onChange={(e) => { updateModel(e.target.value, 'mobile', 'detail') }}
                                />)}
                            </div>
                        </FormItem>
                    </Col>

                </Row>
                <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                <Col span={8}>
                    
                <FormItem {...imageLayout} label="申请资料"
                                style={{ marginLeft: "8.33333333%" }}>
                        <Uploader uploadedUrls ={images}
                                    removeFileCbf={(index)=>{removeImgUrl(index,'images')}}
                                    uploadSuccessCbf={ (imgUrl) => {updateImageModel(imgUrl, 'images')} }
                                    showType={actionType == 'check'?'4':'6'}
                                    fileType='image'
                                    fileMaxSize='0.5'
                                    minCropBoxWidth={1500}
                                    minCropBoxHeight={3000}
                                    maxFiles='4' />
                    </FormItem>
                </Col>
            </Row>
            </Form>
        </CollapsiblePanels>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))
